<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Purchase</title>
		<link rel="stylesheet" href="./css/bootstrap.css">
		<script src="js/jquery-3.6.4.min.js"></script>
		<script src="js/bootstrap.bundle.js"></script>
		<link rel="stylesheet" href="./css/in.css">
	</head>
	<body class="position-relative" style="background: #2c1438;">
		
		<div class="navbar sticky-top d-flex navbar-expand-md justify-content-end navbar-light"style="background: #e47bd8;">
			<button class="navbar-toggler" data-toggle="collapse" data-target="#top"><span class="navbar-toggler-icon"></span></button>
			<ul class=" nav py-2  collapse navbar-collapse" id="top">
				
				<li class="nav-item">
					<a href="./Home.html" class="text-dark text-decoration-none font-weight-bold nav-link">Home</a>
				</li>
				<li class="nav-item dropdown position-relative">
					<a href="#" data-toggle="dropdown" class="text-dark text-decoration-none font-weight-bold nav-link dropdown-toggle">Products</a>
					<ul class="dropdown-menu position-absolute" style="background: #e47bd8;">
						<li class="dropdown-header font-weight-bold text-white">
							title
						</li>
						<li class="dropdown-divider"></li>
						<li class="dropdown-item font-weight-bold">
							select
						</li>
					</ul>
				</li>
				<li class="nav-item">
					<a href="./Blog.html" class="text-dark text-decoration-none font-weight-bold nav-link">Bolg</a>
				</li>
				<li class="nav-item">
					<a href="./Our_mission.html" class="text-dark text-decoration-none font-weight-bold nav-link">Our mission</a>
				</li>
				<li class="nav-item">
					<a href="./Price.html" class="text-white text-decoration-none font-weight-bold nav-link">Purchase</a>
				</li>
			</ul>
		</div>
		
		<div class="navbar navbar-dark navbar-expand-xl"> 
			<a href="#"><img src="./img/Snipaste_2023-05-10_14-56-10.png" class="navbar-brand" alt=""></a>
			<button class="navbar-toggler mr-auto" data-target="#select" data-toggle="collapse"><span class="navbar-toggler-icon"></span></button>
			<ul class="navbar-nav flex-row  align-items-center collapse navbar-collapse" id="select">
				<li class="nav-item dropdown position-relative mx-4">
					<a href="#" data-toggle="dropdown" class="dropdown-toggle text-white text-decoration-none" style="font-size: 25px;">Product</a>
					<ul class="dropdown-menu position-absolute"style="background: #ccd1fd;">
						<li class="dropdown-header text-black font-weight-bold">
							tigle
						</li>
						<li class="dropdown-divider"></li>
						<li class="dropdown-item">
							<a href="#" class="nav-link text-dark font-weight-bold">
								select
							</a>
						</li>
					</ul>
				</li>
				
				<li class="nav-item mx-4">
					<a href="#" class="text-white text-decoration-none" style="font-size:25px;">Pricing</a>
				</li>
				
				<li class="nav-item dropdown position-relative mx-4">
					<a href="#" data-toggle="dropdown" class="dropdown-toggle text-white text-decoration-none" style="font-size: 25px;">Why Track?</a>
					<ul class="dropdown-menu position-absolute"style="background: #ccd1fd;">
						<li class="dropdown-header text-black font-weight-bold">
							tigle
						</li>
						<li class="dropdown-divider"></li>
						<li class="dropdown-item">
							<a href="#" class="nav-link text-dark font-weight-bold">
								select
							</a>
						</li>
					</ul>
				</li>
				
				<li class="nav-item dropdown position-relative mx-4">
					<a href="#" data-toggle="dropdown" class="dropdown-toggle text-white text-decoration-none" style="font-size: 25px;">carrers</a>
					<ul class="dropdown-menu position-absolute"style="background: #ccd1fd;">
						<li class="dropdown-header text-black font-weight-bold">
							tigle
						</li>
						<li class="dropdown-divider"></li>
						<li class="dropdown-item">
							<a href="#" class="nav-link text-dark font-weight-bold">
								select
							</a>
						</li>
					</ul>
				</li>
				
			</ul>
			<ul class="nav my-auto">
				<li class="nav-item mx-3">
					<a href="#Sign" data-toggle="modal" class="text-white text-decoration-none" style="font-size:25px;">
						Sign up
					</a>
				</li>
				
				<li class="nav-item mx-3">
					<a href="#Log" data-toggle="modal" class="text-white text-decoration-none" style="font-size:25px;">
						Log in
					</a>
				</li>
				
				<li class="nav-item mx-3">
					<button class="btn btn-outline-warning rounded-pill font-weight-bold py-3 px-5">Try for free</button>
				</li>
			</ul>
		</div>
		
		<div class="containe">
			<div class="banner d-flex flex-column justify-content-center align-items-center" style="color: #fbe5d8;height: 30vh;">
				<div class="mb-4 font-weight-bold position-relative" data-id="#fbe5d8">Pricing,Plans</div>
				<h5>No credit card required. All plans come with a free,30-day trial of our Premiun features.</h5>
			</div>
			
			<div class="body d-flex flex-column justify-content-center align-items-center">
				<div class="title">
					<h3 class="text-white text-center">
						Choose your billing:
					</h3>
					<div class="bg-white rounded-pill row button position-relative nav">
						<div class="col font-weight-bold rounded-pill position-relative" style="font-size:25px;width: 260px;
						height: 105px;" data-toggle="tab" data-target="#pro1">
							
						</div>
						<div class="col font-weight-bold rounded-pill position-relative " style="font-size:25px;width: 260px;
						height: 105px;" data-toggle="tab" data-target="#pro2">
							
						</div>
						<div class="position-absolute act"></div>
					</div>
				</div>
				<div class="tab-content">
					<div class="tab-pane active"  id="pro1">
						<div class="product row vw-100 my-5">
							<div class="col-lg-3 col-6 p-3">
								<h2 class="text-center">Best values</h2>
								<div class="card">
									<div class="card-header" style="height: 211px;">
										<h2 class="card-title">
											Free
										</h2>
										<p class="card-text">
											Seamless time tracking and reporting designed with freelancers in mind
										</p>
										<h1 class="d-inline" style="color: #e47bd8;font-size: 60px;">
											0$
										</h1>
										<span class="">
											free for up to 5 users.
										</span>
										
									</div>
									<div class="card-body" style="height:576px;">
										<ul class="list">
											<li class="my-2">
												Unlimited time tracking
											</li>
											<li class="my-2">
												Unlimited projects, clients
												and tags
											</li>
											<li class="my-2">
												Exportable reports
											</li>
											<li class="my-2">
												Web app, mobile apps,
												and desktop apps
											</li>
											<li class="my-2">
												Automated time tracking
												triggers
											</li>
											<li class="my-2">
												ldle time detection
											</li>
											<li class="my-2">
												Pomodoro timer
											</li>
											<li class="my-2">
												CSV imports
											</li>
											<li class="my-2">
												Unlimited projects, clients
												and tags
											</li>
											<li class="my-2">
												Track time in 100+
											</li>
										</ul>
										
									</div>
									<div class="card-footer d-flex justify-content-center" style="height:67px;">
										<button class="btn btn-outline-purple px-4 py-2 font-weight-bold rounded-pill">
											Get Started
										</button>
									</div>
								</div>
							</div>
							
							<div class="col-lg-3 col-6 p-3">
								<h2 class="text-center">Best values</h2>
								<div class="card">
									<div class="card-header" style="height: 211px;">
										<h2 class="card-title">
											Starter
										</h2>
										<p class="card-text">
											Built for small teams to work
											at a fast pace without a lot of
											overhead
										</p>
										<h1 class="d-inline" style="color: #e47bd8;font-size: 60px;">
											9$
										</h1>
										<span class="">
											per user per month
										</span>
										
									</div>
									<div class="card-body" style="height:576px;">
										<ul class="list">
											<li class="my-2">
												Everything in Free +
											</li>
											<li class="my-2">
												Billable rates
												
											</li>
											<li class="my-2">
												Time rounding for reports
											</li>
											<li class="my-2">
												Favorite time entries
											</li>
											<li class="my-2">
												Create Saved Reports for
												quick online access
											</li>
											<li class="my-2">
												Project time estimates and
												alerts
											</li>
											<li class="my-2">
												Unlimited projects, clients
												and tags
											</li>
											<li class="my-2">
												Tasks (Sub-projects)
											</li>
											<li class="my-2">
												Pre-populated project
												templatess
											</li>
											<li class="my-2">
												View tracked time in
												your calendar
											</li>
										</ul>
										
									</div>
									<div class="card-footer d-flex justify-content-center" style="height:67px;">
										<button class="btn btn-outline-purple px-4 py-2 font-weight-bold rounded-pill">
											Get Started
										</button>
									</div>
								</div>
							</div>
							
							<div class="col-lg-3 col-6 p-3">
								<h2 class="text-center">Best values</h2>
								<div class="card">
									<div class="card-header" style="height: 211px;">
										<h2 class="card-title">
											Premium
										</h2>
										<p class="card-text">
											Powerful tools to keep
											growing teams aligned and
											agile
										</p>
										<h1 class="d-inline" style="color: #e47bd8;font-size: 60px;">
											18$
										</h1>
										<span class="">
											free for up to 5 users.
										</span>
										
									</div>
									<div class="card-body" style="height:576px;">
										<ul class="list">
											<li class="my-2">
												Everything in Starter +
											</li>
											<li class="my-2">
												Team time tracking
												reminders
											</li>
											<li class="my-2">
												Schedule saved reports via
												email
											</li>
											<li class="my-2">
												Time tracking audits
											</li>
											<li class="my-2">
												Project forecasts and
												analysis
											</li>
											<li class="my-2">
												Centralized control of labor
												costs and billable rates for
												team members
											</li>
											<li class="my-2">
												Set required fields for time
												entries
											</li>
											<li class="my-2">
												Lock time entries
											</li>
											<li class="my-2">
												Sinale sian-on (SSO)
											</li>
											<li class="my-2">
												Native Jira
											</li>
										</ul>
										
									</div>
									<div class="card-footer d-flex justify-content-center" style="height:67px;">
										<button class="btn btn-outline-purple px-4 py-2 font-weight-bold rounded-pill">
											Get Started
										</button>
									</div>
								</div>
							</div>
							
							<div class="col-lg-3 col-6 p-3">
								<h2 class="text-center">Best values</h2>
								<div class="card">
									<div class="card-header" style="height: 211px;">
										<h2 class="card-title">
											Enter price
										</h2>
										<p class="card-text">
											Tailored solutions for your large or complex organization
										</p>
										<h1 class="d-inline" style="color: #e47bd8;font-size: 65px;">
											~
										</h1>
										<span class="">
											Custom pricing Unlimited user.
										</span>
										
									</div>
									<div class="card-body" style="height:576px;">
										<ul class="list">
											<li class="my-2">
												Everything in Premium +
											</li>
											<li class="my-2">
												Manage multiple
												workspaces under one
												Organization
											</li>
											<li class="my-2">
												Customizable solutions
											</li>
											<li class="my-2">
												Volume discounts for large
												teams on our annual plan
											</li>
											
										</ul>
										
									</div>
									<div class="card-footer d-flex justify-content-center" style="height:67px;">
										<button class="btn btn-outline-purple px-4 py-2 font-weight-bold rounded-pill">
											Get Started
										</button>
									</div>
								</div>
							</div>
						</div>

					</div>
					<div class="tab-pane fade"  id="pro2">
						<div class="product row vw-100 my-5">
							<div class="col-lg-3 col-6 p-3">
								<h2 class="text-center">Good values</h2>
								<div class="card">
									<div class="card-header" style="height: 211px;" style="height: 211px;">
										<h2 class="card-title">
											small
										</h2>
										<p class="card-text">
											Seamless time tracking and reporting designed with freelancers in mind
										</p>
										<h1 class="d-inline" style="color: #e47bd8;font-size: 60px;">
											3$
										</h1>
										<span class="">
											free for up to 5 users.
										</span>
										
									</div>
									<div class="card-body" style="height:576px;">
										<ul class="list">
											<li class="my-2">
												Unlimited time tracking
											</li>
											<li class="my-2">
												Unlimited projects, clients
												and tags
											</li>
											<li class="my-2">
												Exportable reports
											</li>
											<li class="my-2">
												Web app, mobile apps,
												and desktop apps
											</li>
											<li class="my-2">
												Automated time tracking
												triggers
											</li>
											<li class="my-2">
												ldle time detection
											</li>
											<li class="my-2">
												Pomodoro timer
											</li>
											<li class="my-2">
												CSV imports
											</li>
											<li class="my-2">
												Unlimited projects, clients
												and tags
											</li>
											<li class="my-2">
												Track time in 100+
											</li>
										</ul>
										
									</div>
									<div class="card-footer d-flex justify-content-center" style="height:67px;">
										<button class="btn btn-outline-purple px-4 py-2 font-weight-bold rounded-pill">
											Get Started
										</button>
									</div>
								</div>
							</div>
							
							<div class="col-lg-3 col-6 p-3">
								<h2 class="text-center">Good values</h2>
								<div class="card">
									<div class="card-header" style="height: 211px;">
										<h2 class="card-title">
											mid
										</h2>
										<p class="card-text">
											Built for small teams to work
											this so intersting
										</p>
										<h1 class="d-inline" style="color: #e47bd8;font-size: 60px;">
											4$
										</h1>
										<span class="">
											per user per month
										</span>
										
									</div>
									<div class="card-body" style="height:576px;">
										<ul class="list">
											<li class="my-2">
												Everything in Free +
											</li>
											<li class="my-2">
												Billable rates
												
											</li>
											<li class="my-2">
												Time rounding for reports
											</li>
											<li class="my-2">
												Favorite time entries
											</li>
											<li class="my-2">
												Create Saved Reports for
												quick online access
											</li>
											<li class="my-2">
												Project time estimates and
												alerts
											</li>
											<li class="my-2">
												Unlimited projects, clients
												and tags
											</li>
											<li class="my-2">
												Tasks (Sub-projects)
											</li>
											<li class="my-2">
												Pre-populated project
												templatess
											</li>
											<li class="my-2">
												View tracked time in
												your calendar
											</li>
										</ul>
										
									</div>
									<div class="card-footer d-flex justify-content-center" style="height:67px;">
										<button class="btn btn-outline-purple px-4 py-2 font-weight-bold rounded-pill">
											Get Started
										</button>
									</div>
								</div>
							</div>
							
							<div class="col-lg-3 col-6 p-3">
								<h2 class="text-center">Good values</h2>
								<div class="card">
									<div class="card-header" style="height: 211px;">
										<h2 class="card-title">
											big
										</h2>
										<p class="card-text">
											So powerful price,this have many power
											it' so pretty
										</p>
										<h1 class="d-inline" style="color: #e47bd8;font-size: 60px;">
											8$
										</h1>
										<span class="">
											free for up to 5 users.
										</span>
										
									</div>
									<div class="card-body" style="height:576px;">
										<ul class="list">
											<li class="my-2">
												Everything in Starter +
											</li>
											<li class="my-2">
												Team time tracking
												reminders
											</li>
											<li class="my-2">
												Schedule saved reports via
												email
											</li>
											<li class="my-2">
												Time tracking audits
											</li>
											<li class="my-2">
												Project forecasts and
												analysis
											</li>
											<li class="my-2">
												Centralized control of labor
												costs and billable rates for
												team members
											</li>
											<li class="my-2">
												Set required fields for time
												entries
											</li>
											<li class="my-2">
												Lock time entries
											</li>
											<li class="my-2">
												Sinale sian-on (SSO)
											</li>
											<li class="my-2">
												Native Jira
											</li>
										</ul>
										
									</div>
									<div class="card-footer d-flex justify-content-center" style="height:67px;">
										<button class="btn btn-outline-purple px-4 py-2 font-weight-bold rounded-pill">
											Get Started
										</button>
									</div>
								</div>
							</div>
							
							<div class="col-lg-3 col-6 p-3">
								<h2 class="text-center">Best values</h2>
								<div class="card">
									<div class="card-header" style="height: 211px;">
										<h2 class="card-title">
											Enter price
										</h2>
										<p class="card-text">
											Tailored solutions for your large or complex organization
										</p>
										<h1 class="d-inline" style="color: #e47bd8;font-size: 65px;">
											~
										</h1>
										<span class="">
											Custom pricing Unlimited user.
										</span>
										
									</div>
									<div class="card-body" style="height:576px;">
										<ul class="list">
											<li class="my-2">
												Everything in Premium +
											</li>
											<li class="my-2">
												Manage multiple
												workspaces under one
												Organization
											</li>
											<li class="my-2">
												Customizable solutions
											</li>
											<li class="my-2">
												Volume discounts for large
												teams on our annual plan
											</li>
											
										</ul>
										
									</div>
									<div class="card-footer d-flex justify-content-center" style="height:67px;">
										<button class="btn btn-outline-purple px-4 py-2 font-weight-bold rounded-pill">
											Get Started
										</button>
									</div>
								</div>
							</div>
						</div>
					
					</div>
				</div>
				<div class="produce_introduce text-center my-5" style="color: #faebd7;">
					<p>
						All plans come with a free, 30-day trial of Toggl Track Premium-no credit card required. You can
						 <br>choose to upgrade at the end of the trial or continue using Track for free. <br>
						Still unsure?
					</p>
					<button class="btn btn-outline-white rounded-pill p-3 font-weight-bold">
						Compare all plan features >
					</button>
				</div>
			</div>
		</div>
		<div class="footer row m-5">
			<ul class="list-unstyled col-6 col-lg-3 my-5">
				<h4 class="text-secondary">
					TOGGL GLOBAL
				</h4>
				<li class="my-3">
					<a href="#" class="text-white">
						Blog
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Our Mission
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Working at Toggl
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Legal Terms
					</a>
				</li>
			</ul>
			
			<ul class="list-unstyled col-6 col-lg-3 my-5">
				<h4 class="text-secondary">
					PRODUCT
				</h4>
				<li class="my-3">
					<a href="#" class="text-white">
						Features
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Pricing
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Integrations
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						API
					</a>
				</li>
			</ul>
			
			<ul class="list-unstyled col-6 col-lg-3 my-5">
				<h4 class="text-secondary">
					USE CASES
				</h4>
				<li class="my-3">
					<a href="#" class="text-white">
						Billing and Invoicing
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Employee Time Tracking
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Project Budgeting
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Reporting
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Payroll
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Work Hours Tracker
					</a>
				</li>
			</ul>
			
			<ul class="list-unstyled col-6 col-lg-3 my-5">
				<h4 class="text-secondary">
					Help
				</h4>
				<li class="my-3">
					<a href="#" class="text-white">
						Support & Knowledge Base
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Request A Demo
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Contact Us
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Legal Terms
					</a>
				</li>
			</ul>
			
			
			
		</div>
		<div class="modal fade" id="Sign">
			<div class="modal-dialog">
				<div class="modal-content" style="background: rgba(194, 186, 254, 0.7);">
					<h4 class="modal-header text-white">
						Welcome Sign
					</h4>
					<form action="" class="modal-body">
						<div class="input-group row my-4">
							<label for="user" class="form-check-label text-white font-weight-bold my-auto col-3 text-right">user：</label>
							<input id="user" type="text" class="form-control col-9">
						</div>
						
						<div class="input-group row my-4">
							<label for="psd" class="form-check-label text-white font-weight-bold my-auto col-3 text-right">password：</label>
							<input id="psd" type="password" class="form-control col-9">
						</div>
						
						<div class="input-group row my-4">
							<label for="psd2" class="form-check-label text-white font-weight-bold my-auto col-3 text-right">repassword：</label>
							<input id="psd2" type="password" class="form-control col-9">
						</div>
						<div class="modal-footer">
							<button class="btn btn-danger" data-dismiss="modal">close</button>
							<button class="btn btn-primary" data-dismiss="modal">submit</button>
						</div>
					</form>
				</div>
			</div>
		</div>
		
		<div class="modal fade" id="Log">
			<div class="modal-dialog">
				<div class="modal-content" style="background: rgba(194, 186, 254, 0.7);">
					<h4 class="modal-header text-white">
						Log in
					</h4>
					<form action="" class="modal-body">
						<div class="input-group row my-4">
							<label for="user" class="form-check-label text-white font-weight-bold my-auto col-3 text-right">user：</label>
							<input id="user" type="text" class="form-control col-9">
						</div>
						
						<div class="input-group row my-4">
							<label for="psd" class="form-check-label text-white font-weight-bold my-auto col-3 text-right">password：</label>
							<input id="psd" type="password" class="form-control col-9">
						</div>
					
						<div class="modal-footer">
							<button class="btn btn-danger" data-dismiss="modal">close</button>
							<button class="btn btn-primary" data-dismiss="modal">submit</button>
						</div>
					</form>
				</div>
			</div>
		</div>
		
		<script>
			const divs = document.querySelectorAll('.button div')
			for(let i = 0 ; i < divs.length - 1 ; i++){
				divs[i].addEventListener('click',function(e){
					document.querySelector('.act').style.left = e.target.offsetLeft + 5 + 'px'
				})
			}
			
			
		</script>
	</body>
</html>
